<template>
    <div class="audio" style="background: #fff">
        
        <audio ref="audio" style="display: none" :src="audioUrl" @pause="onPause" @play="onPlay" 
    @timeupdate="onTimeupdate"    @loadedmetadata="onLoadedmetadata" controls="controls"></audio>

        <div class="wrap" >
            <span @click="startPlayOrPause">
            <i class="icon-play" :class="{'icon-playing':audio.playing}"></i>{{audio.playing | transPlayPause}}{{audioName}}</span>
            <i class="iconfont iconcha1 close" @click="close"></i>
            <!-- <span>{{ audio.currentTime | formatSecond}} --</span><span>{{ audio.maxTime | formatSecond}}</span> -->
            <!-- <van-slider v-model="audio.currentTime" @change="changeCurrentTime" /> -->
        </div>
    </div>
</template>

<script>
// 将整数转换成 时：分：秒的格式
/*function realFormatSecond(second) {
    var secondType = typeof second

    if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
    } else {
    return '0:00:00'
    }
}*/
import {realFormatSecond} from  '@/common/js/common'
export default {
    name: 'VueAudio',
    props:{
        audioUrl:{
            type:String,
            default:null
        },
        audioName:{
            type:String,
            default:null
        },
        audio: {

            type:Object,
            default: function (value) {
                return {
                    // 该字段是音频是否处于播放状态的属性
                    playing: false,
                    // 音频当前播放时长
                    currentTime: 0,
                    // 音频最大播放时长
                    maxTime: 0
                }
            }
        }
    },
    data () {
        return {
        }
    },
    methods:{
        // 控制音频的播放与暂停
        startPlayOrPause () {

          return this.audio.playing ? this.pause() : this.play()
        },
        // 播放音频
        play () {
          this.$refs.audio.play()
        },
        // 暂停音频
        pause () {
          this.$refs.audio.pause()
        },
        // 当音频播放
        onPlay () {
          this.audio.playing = true
          this.$emit('playStatus',this.audio.playing)
        },
        // 当音频暂停
        onPause () {
          this.audio.playing = false
          this.$emit('playStatus',this.audio.playing)
        },
        // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
        onTimeupdate(res) {
            // console.log('timeupdate')
            // console.log(res)
            
            this.audio.currentTime = res.target.currentTime
            this.$emit('currentTime',parseInt(this.audio.currentTime))
        },
        // 当加载语音流元数据完成后，会触发该事件的回调函数
        // 语音元数据主要是语音的长度之类的数据
        onLoadedmetadata(res) {
            console.log('loadedmetadata')
            console.log(res)
            this.audio.maxTime = parseInt(res.target.duration)
            this.$emit('audioMax',this.audio.maxTime)
            console.log(this.audio.maxTime)
        },
        changeCurrentTime(index) {
            console.log('a:'+this.audio.playing)
            this.$refs.audio.currentTime = index;
            console.log('b:'+this.audio.playing)
        },
        close(){
            this.pause()
            
            this.$emit('closeAudio')
        }
    },
    filters: {
        // 使用组件过滤器来动态改变按钮的显示
        transPlayPause(value) {
            return value ? '点击暂停播放' : '点击继续播放'
        },
        // 将整数转化成时分秒
        formatSecond(second = 0) {
            // console.log(realFormatSecond)
            return realFormatSecond(second)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped   lang="scss">
.audio {
    .wrap{ 
        line-height: 34px; overflow: hidden;position: relative;padding:0 34px;
        span{display: block;}
        .icon-play{position: absolute; left: 0; top: 0; display: block; width: 34px ; height:34px; background:url('../assets/images/icon_play2.png') no-repeat center; background-size: 40% 40%; 
            &.icon-playing{background-image: url('../assets/images/icon_playing2.gif');}
        }
        .close { position: absolute; right: 0; top: 0; display: block; width:34px; height:34px; font-size: 14px; text-align: center; color: #999; }
    }
}
</style>
